<script setup lang="ts">
import {ref} from "vue";

const checked1 = ref(false)
const checked2 = ref(true)
</script>
<template>
  <div class="setting-board">
    <div class="setting-item">
      <div class="setting-item-container">
        <div class="left-label">
          <div class="setting-icon"></div>
          <div class="setting-title">全局消息提醒</div>
        </div>
        <div class="right-set">
          <a-switch v-model:checked="checked1"/>
        </div>
      </div>
      <div class="divider-container">
        <a-divider class="divider"></a-divider>
      </div>
      <div class="setting-item-container">
        <div class="left-label">
          <div class="setting-icon"></div>
          <div class="setting-title">全局消息提醒</div>
        </div>
        <div class="right-set">
          <a-switch v-model:checked="checked2"/>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.setting-board {
  height: 100%;

  .setting-item {
    width: 100%;
    background-color: #F2F2F2;
    border-radius: 6px;

    .setting-item-container {
      display: flex;
      padding: 10px 20px;
      justify-content: space-between;

      .left-label {
        display: flex;

        .setting-title {
          user-select: none;
        }
      }
    }

    .divider-container {
      padding: 0 20px;

      .divider {
        margin: 0;
        padding: 0;
      }
    }


  }
}
</style>
